<template>
  <div class="container" ref="clcheight">
    <!-- 动态粒子 -->
    <vue-particles class="login-background" color="#304156" :particleOpacity="0.7" :particlesNumber="60"
      shapeType="circle" :particleSize="6" linesColor="#304156" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4"
      :linesDistance="150" :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true"
      clickMode="push"></vue-particles>
    <!-- 登录框 -->
    <div class="login-wrapper">
      <div class="header">图书管理系统</div>
      <div class="form-wrapper">
        <!-- 登录 -->
        <el-form ref="loginForm" :model="loginForm">
          <!-- 账号 -->
          <el-form-item>
            <el-input v-model="loginForm.username" class="input-item"></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item>
            <el-input v-model="loginForm.password" type="password" class="input-item"></el-input>
          </el-form-item>
          <!-- 角色 -->
          <el-form-item>
            <el-radio-group v-model="loginForm.role">
              <el-radio :label="1">管理</el-radio>
              <el-radio :label="2">读者</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 登录 -->
          <el-form-item>
            <el-button type="primary" @click="onSubmit" @keydown.enter="onSubmit" class="btn"
              :loading="loading">登录</el-button>
          </el-form-item>
          <p class="tipAccount">管理账户:admin 密码:admin123</p>
          <br />
          <p class="tipAccount">用户账户:11 密码:admin123</p>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getLoginAPI } from "@/api";
import { mapMutations } from "vuex";
import { getMenusAPI } from "@/api";
import { initRoutes } from "@/router";
export default {
  name: "Login",
  data() {
    return {
      // 登录加载
      loading: false,
      loginForm: {
        username: "admin",
        password: "admin123",
        role: 1,
      },
    };
  },
  methods: {
    go() {
      console.log(1);
    },
    ...mapMutations([
      "UPDATETOKEN",
      "UPDATEUSERNAME",
      "SETROLE",
      "SETUSERID",
      "SETPHONE",
    ]),
    onSubmit() {
      this.loading = true;
      getLoginAPI(this.loginForm).then((res) => {
        console.log(res.data);
        if (res.data.status === 1) {
          this.loading = false;
          this.$message.error(res.data.message);
          return;
        } else {
          let role = res.data.role;
          if (role === 0) {
            this.$message.success("欢迎超级管理员" + res.data.username);
          } else if (role === 1) {
            this.$message.success("欢迎管理员" + res.data.username);
          } else {
            this.$message.success("欢迎用户" + res.data.username);
          }
        }
        localStorage.setItem("token", res.data.token);
        this.UPDATETOKEN(res.data.token);
        this.UPDATEUSERNAME(res.data.username);
        this.SETROLE(res.data.role);
        this.SETUSERID(res.data.userid);
        this.SETPHONE(res.data.phone);
        // console.log(this.$store);
        // console.log(this.$router);
        getMenusAPI().then((res) => {
          //   console.log(res.data.data);
          this.$store.commit("SETMENULIST", res.data.data);
          initRoutes();
          this.$router.push("/");
        });
      });
    },
  },
  mounted() {
    window.onkeydown = (e) => {
      if (e.keyCode === 13) {
        this.onSubmit()
      }
    }
  },
};
</script>

<style scoped>
.container {
  height: 100%;
  width: 100%;
  overflow: hidden;
  /* background-image: linear-gradient(to right, #fbc2eb, #a6c1ee); */
  /* background-image: linear-gradient(to right, #3c9eda, #2f6fef); */
  /* background-color: #394b58;  */
  /*Fallback if gradeints don't work */
  /* background: #141e6e; */
  /*Linear gradient... */
  /* background: radial-gradient(at center, #0075c3, #000b61); */
}

/* ---动态粒子--- */
.login-background {
  /* 可设置背景图 铺满屏 */
  background: linear-gradient(-180deg, #dceaf2 0%, #ffffff 100%);
  width: 100%;
  height: 100%;
  position: fixed;
}

/* ---登录框--- */
.login-wrapper {
  background-color: #fff;
  width: 358px;
  height: 588px;
  border-radius: 15px;
  padding: 0 50px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.header {
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  line-height: 200px;
}

.el-form-item__content .el-radio-group {
  margin-left: 10px;
}

.input-item {
  display: block;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  /* border-bottom: 1px solid rgb(128, 125, 125); */
  font-size: 15px;
  outline: none;
}

.el-input__inner {
  border: 0;
}

.input-item:placeholder {
  text-transform: uppercase;
}

.btn {
  width: 100%;
  /* background-image: linear-gradient(to right, #a6c1ee, #fbc2eb); */
  background-image: linear-gradient(to right, #2fb2ef, #1ddbec);
  color: #fff;
  border: 0;
  margin-top: 50px;
}

/* tipAccount */
.tipAccount {
  display: block;
  float: right;
  color: #e74c3c;
  font-size: 14px;
}
</style>
